<template>
	<el-drawer title="订单详情" v-model="visible" :size="800" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main>
				<el-form>
					<el-form-item label="订单标题" prop="title">{{form.title}}
					</el-form-item>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="订单编号" prop="orderCode">{{form.orderCode}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="付款方式" prop="payType">{{form.payTypeName}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="客户名称" prop="customerId">{{form.cnName}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="报价单号" prop="quotationId">{{form.quotationTitle}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="采购人员" prop="linkManId">{{form.linkManName}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="联系电话" prop="tel">{{form.tel}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="支付日期" prop="payDay" maxlength="80">{{form.payDay}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="订单金额" prop="amount">{{form.amount}}/元
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider content-position="center">订单明细</el-divider>
					<scTable :data="mx" drag-sort>
						<el-table-column prop="productName" label="产品名称" width="200"></el-table-column>
						<el-table-column prop="materialCode" label="产品编码" width="150" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column prop="model" label="产品型号" width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column prop="count" label="数量" width="50"></el-table-column>
						<el-table-column prop="unit" label="单位" width="50" align="center"></el-table-column>
						<el-table-column prop="delivery" label="交货期" width="150" align="center"></el-table-column>
						<el-table-column prop="guidePrice" label="单价" width="100" align="center"></el-table-column>
						<el-table-column prop="total" label="小计" width="100" align="center"></el-table-column>
						<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true"></el-table-column>
					</scTable>
					<el-form-item label="备注说明" prop="remark">{{form.remark}}</el-form-item>
					<el-form-item label="相关附件" v-if="form.attachId!=''">
						<attach-menu :attachIds="form.attachId" :roleFlag="3" :preview="true" ></attach-menu>
					</el-form-item>
				</el-form>
				<el-footer style="text-align: center;">
					<el-button @click="visible=false">关闭</el-button>
				</el-footer>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'
export default {
	emits: ['success', 'closed'],
	components: {AttachMenu},
	data() {
		return {
			loading: false,
			mx:[],
			form: {
				orderId:'',
				orderCode:"",
				title: '',
				payTypeName: '',
				cnName: '',
				linkManName:'',
				quotationTitle:"",
				tel:"",
				payDay:'',
				amount: '',
				remark: '',
				attachId:'',
				mx:""
			},
			visible: false,
			isSaveing: false,
		}
	},
	mounted() {

	},
	methods: {
		//显示
		open(model) {
			this.model = model;
			this.visible = true;
			return this;
		},
		//表单注入数据
		setData(data) {
			this.form.orderId = data.orderId
			this.form.title = data.title
			this.form.payTypeName = data.payTypeName
			this.form.payDay = data.payDay
			this.form.orderCode = data.orderCode
			this.form.attachId = data.attachId
			this.form.cnName = data.cnName
			this.form.linkManName = data.linkManName
			this.form.quotationTitle = data.quotationTitle
			this.form.tel = data.tel
			this.form.amount = data.amount
			this.form.remark = data.remark
			this.getCrmOrderMxList(data.orderId);
		},
		async getCrmOrderMxList(orderId){
			let res = await this.$API.crm.crmOrderMx.getCrmOrderMxList.get({orderId: orderId});
			if (res.code == 200) {
				this.mx = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		}
	}
}
</script>

<style>
</style>
